
<template>
    <div class="content-set"   v-bind:class="customClass" v-bind:style="cssStyle()" >
        <div class="hd">
            {{config.title}}
            <div class="btns">
                <i class="fa fa-times pull-right fa-2x close" title="关闭" v-on:click="close()"></i>
            </div>
        </div>
        <div class="bd">
            <div class="top_left">
                <!--<div class="search">
                    开始时间: <input type="text" placeholder="" class="input-one" v-model="params.startDate">
                    结束时间: <input type="text" placeholder="" class="input-one" v-model="params.endDate">
                    <button @click="search()">搜索</button>
                </div>-->
                <div class="content_list" v-bind:style="itemsHeight()">
                    <div class="content" v-for="contentOne in items.list">
                        <div class="user">
                            <img :src="contentOne.avatar" />
                            <p>{{contentOne.buyer_nick}}</p>
                        </div>
                        <div class="content_bd" @click="contentShow(contentOne)">{{contentOne.description}}</div>
                        <div class="content_imgs">
                            <img class="content_img" v-for="img in JSON.parse(contentOne.pic_meta)" :src="img.pic"/>
                        </div>

                        <!--<div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="img in JSON.parse(contentOne.pic_meta)"><img class="content_img" :src="img.pic"/></div>
                            </div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>-->

                        <div class="content_operate">
                            <button
                                  v-bind:class="check(contentOne.mix_buyer_nick) >= 0 ? 'cancelbtn':'selectedbtn'"
                                  v-on:click="check(contentOne.mix_buyer_nick) >= 0 ? delSelected(contentOne):selected(contentOne)" >{{check(contentOne.mix_buyer_nick) >= 0 ? '取消' : '添加'}}</button>
                        </div>
                    </div>
                </div>

                <pagination :total-items="items.total"
                            :curr-page="params.pageNo"
                            :size-page="params.pageSize"
                            prev-show="2"
                            next-show="2"
                            @pageChange="pageChange">
                </pagination>
            </div>
            <div class="local_right" v-bind:style="itemsHeight()">
                <div class="content" v-for="contentOne in selectedList">
                    <div class="user">
                        <img :src="contentOne.avatar" />
                        <p>{{contentOne.buyer_nick}}</p>
                    </div>
                    <div class="content_bd" @click="contentShow(contentOne)">{{contentOne.description}}</div>
                    <div class="content_imgs">
                        <img class="content_img" v-for="img in JSON.parse(contentOne.pic_meta)" :src="img.pic"/>
                    </div>

                    <!--<div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="img in JSON.parse(contentOne.pic_meta)"><img class="content_img" :src="img.pic"/></div>
                        </div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>-->

                    <div class="content_operate">
                        <button class="cancelbtn" v-on:click="delSelected(contentOne)">取消</button>
                    </div>
                </div>

            </div>

        </div>
        <div class="ft">
            <button class="" v-on:click="save()">确定</button>
            <button class="cancelbtn" v-on:click="close()">取消</button>
        </div>
    </div>
</template>


<script>
    import fn from 'admin/js/common/function.js';
    import pagination from 'admin/js/common/pagination.vue';
    import contentShow from 'admin/js/common/content-show.vue';

    export default {
        data: function(){
            return {
                config: {
                    title: '请稍等...',
                    content: '',
                    style: {
                        left: 100,
                        top: 30,
                        width: 150,
                        height: 'auto'
                    },
                    customClass: ''	//自定义样式
                },
                params: {
                    /*startDate: '',
                    endDate: '',*/
                    itemId: 0,
                    pageNo: 1,
                    pageSize: 40
                },
                items: {
                    loading: true,
                    total : 0,
                    list : []
                },
                selectedList: [],
                height: 0,
                keyWord: ''
            }
        },
        methods: {
            close(){
                $('.content-set').remove();
                this.$emit("show-coverq",false);
            },
            select_id(s_id,item){
                this.params.catIds = s_id;
                this.queryItems();
            },
            _get_left(){
                this.config.style.width = this.config.style.width.toString() || '68%';

                //百分数方法
                if(this.config.style.width.lastIndexOf('%') != -1){
                    this.config.style.left = ((100 - parseInt(this.config.style.width.substr(0,this.config.style.width.length-1))) / 2) + '%' ;
                }else{
                    this.config.style.left = (($(window).width() - parseInt(this.config.style.width)) / 2);
                }

            },
            cssStyle(){
                return fn.makeStyle(this.config.style);
                //return null;
            },
            customClass(){
                return null;
            },
            itemsHeight(){
                //动态修正高度 600  480  360
                if($(window).height() <=650) {
                    return {height:'360px'};
                }

                if($(window).height() <=750) {
                    return {height:'480px'};
                }

                if($(window).height() > 750) {
                    return {height:'600px'};
                }

            },
            KeyWordSet(keyWord){
                this.params.keyWord = encodeURIComponent(keyWord);
                this.queryTopItems();
            },
            pageChange(i){
                var self = this;
                self.params.pageNo = i;
                this.queryTopItems();
            },
            selected(contentOne){
                this.selectedList.push(contentOne);
            },
            delSelected(contentOne){
                var ii = _.find(this.selectedList,{'mix_buyer_nick':contentOne.mix_buyer_nick});
                var index = this.selectedList.indexOf(contentOne);
                this.selectedList.splice(index, 1);
            },
            contentShow(contentOne){
                var self = this;
                //这是个动态实时加载的组件
                var contentS = Vue.extend(contentShow);
                contentS = new contentS;
                contentS.temp = {
                    config: {
                        title: '商品评价',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };
                contentS.content = contentOne;

                $(".app").append(contentS.$mount().$el);
            },
            save(){
                var self = this;

                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.setContent,
                    dataType: 'json',
                    data: {
                        'item_id': self.params.itemId,
                        'content': JSON.stringify(self.selectedList)
                    },
                    error: function (error) {
                    },
                    success: function (response) {
                        if (response.err) {

                        } else {
                            //console.log(response.date);
                            self.$emit("content-change",JSON.stringify(self.selectedList));
                            self.close();
                        }
                    }
                });
            },
            check(xnick){
                var index =  _.findIndex(this.selectedList, function(o) {
                    return o.mix_buyer_nick == xnick;
                });
                return index;
            },
            queryTopItems(){
                var self = this;
                //取TOP
                $.ajax({
                    type: 'POST',
                    url: CFG.api.top.getTraderate,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                    },
                    success: function (response) {
                        if (response.err) {

                        } else {
                            self.items.total = response.data.total;
                            self.items.list = response.data.list;
                        }
                    }
                });
            }
        },
        watch: {
            'params.mode': function (newVal, oldVal) {
                this.params.keyWord =  '';
                this.params.catIds = 0;
                this.params.pageNo = 1;
                this.queryTopItems();
            },
            /*'params.keyWord': function (newVal, oldVal) {
             this.params.pageNo = 1;
             this.queryItems();
             },*/
            'params.catIds': function (newVal, oldVal) {
                this.params.pageNo = 1;
                this.queryTopItems();
            },
            'params.pageNo': function (newVal, oldVal) {
                this.queryTopItems();
            }
        },
        created (){
            var self = this;

            //动态修正高度
            if($(window).height() <= 650) {
                this.params.pageSize = 3;
            }

            if($(window).height() <= 750) {
                this.params.pageSize = 5;
            }

            if($(window).height() > 750) {
                this.params.pageSize = 7;
            }


            this.$nextTick(function(){
                $.extend(true,self.$data, self.temp);
                self._get_left();
                self.queryTopItems();

                //取本地已选
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getRates,
                    dataType: 'json',
                    data:{
                        itemId: self.params.itemId
                    },
                    error: function (error) {
                    },
                    success: function (response) {
                        if (response.err) {
                        } else {
                            self.selectedList = response.data.content;

                            self.$nextTick(function(){
                                $('.swiper-container').each(function(i,t){

                                    var mySwiper = new Swiper(t, {
                                        nextButton: '.swiper-button-next',
                                        prevButton: '.swiper-button-prev',
                                    })

                                });
                            });
                        }
                    }
                });
            })

        },
        components: {
            pagination,
            contentShow
        }
    }
</script>

<style lang="less">
    .content-set {
        position:fixed;
        top:10px;
        _position:absolute;
        min-height:50px;
        _height:50px;
        opacity: 0.9;
        z-index: 200;
        background-color:#ccc;
        border-radius: 4px;

        input {
            width: 100px;
        }

        hr {
            margin: 10px 0;
            border: 0;
            border-top: 1px solid #242424;
            border-bottom: 1px solid #404040;
        }

        .hd {
            display: flex;
            justify-content:  space-between;
            height:30px;
            line-height: 30px;
            vertical-align: middle;
            padding:0 5px;
            border-bottom: 1px solid #242424;
            border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        }

        .bd {
            display: flex;
            padding: 5px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            min-height: 30px;
            max-height: 670px !important;

            .content {
                display: flex;
                background-color: #eee;
                margin-bottom: 5px;
                padding: 3px 0;
                border-radius: 4px;
                border: 1px solid #bfcbd9;

                .user {
                    padding: 3px 3px;

                    img{
                        width: 40px;
                        height: 40px;
                    }

                    p{
                        width: 80px;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                    }
                }
                .content_bd {
                    width: 200px;
                    height: 60px;
                    line-height: 20px;
                    overflow: hidden;
                    cursor: pointer;
                }

                .content_imgs {
                    display: flex;
                    flex-wrap: wrap;
                    width: 101px;
                    height: 64px;
                    padding-left: 5px;
                    overflow: hidden;

                    img {
                        width: 32px;
                        height: 32px;
                        padding-right: 2px;
                        padding-bottom: 2px;
                    }
                }

                .swiper-container {
                    width: 60px;
                    height: 60px;

                img{
                    width: 60px;
                    height: 60px;
                }

                .swiper-button-prev {
                    display: none;
                    width: 10px;
                    left: 0;
                    background-size: 10px 44px;
                    background-color: rgba(255,255,255,0.5);
                }
                .swiper-button-next {
                    display: none;
                    width: 10px;
                    right: 0;
                    background-size: 10px 44px;
                    background-color: rgba(255,255,255,0.5);
                }

                &:hover{
                    .swiper-button-prev,
                    .swiper-button-next {
                        display: block;
                    }

                    }
                }
            }

            .top_left {
                width: 50%;
                border-right: 1px solid rgba(0, 0, 0, 0.4);

                .search{
                    text-align: center;
                }
                .content_list {
                    padding-right: 5px;
                }
            }

            .local_right {
                width: 50%;
                padding-left: 5px;
                overflow: auto;
            }
        }

        .ft {
            vertical-align: middle;
            padding:2px 5px;
            text-align: center;
            border-top: 1px solid #242424;
            border-top: 1px solid rgba(0, 0, 0, 0.4);
        }


    }

</style>
